<template>
  <!-- 全局提示框 -->
  <transition name="dialog">
  <div v-show="visible" class="dialog-tips dialog-center" :class="classDialog" >
    <div class="box">
        <i :class="classIcon"></i>
        <p>{{message}}</p>
    </div>
  </div>
  </transition>
</template>
<script>
  export default {
    data() {
      return {
        visible: false,
        message: "",
        type:'success'
      };
    },
    methods:{

    },
    computed:{
      classDialog(){
         return {
           'dialog-success':this.type==='success',
           'dialog-warning':this.type==='warning',
           'dialog-error':this.type==='error',
           'dialog-info':this.type==='info',
         }
        },
      classIcon(){
          return {
            'el-icon-success':this.type==='success',
            'el-icon-warning':this.type==='warning',
            'el-icon-error':this.type==='error',
            'el-icon-info':this.type==='info',
          }
      }
    }
  };
</script>
<style lang="scss" scoped>
  .dialog-tips{
    position: fixed;
    z-index: 100;
    width: 240px;
    padding: 10px;
    /*white-space: nowrap;*/
    background-color: #fff;
    box-shadow: 0px 8px 15px 0 rgba(0, 0, 0, 0.1);
    text-align: center;
     .box{
       i{
         font-size: 30px;
         margin-top: 10px;
       }
       p{
         margin: 10px 0;
         display: block;
         /*word-break:break-all;*/
       }
       .el-icon-success{
         color: #3DBD7D;
       }
       .el-icon-warning{
         color: #FFBF00;
       }
       .el-icon-error{
         color: #f56c6c;
       }
       .el-icon-info{
         color: #909399;
       }
     }
  }
  .dialog-center {
    top: 30%;
    left: 50%;
    transform: translate(-50%, -50%)
  }
  .dialog-success{
    border: 1px solid #A7E1C4;
    background: #EBF8F2;
    opacity: 0.9;
  }
  .dialog-warning{
    border: 1px solid #FFBF00;
    background: #FFFAEB;
    opacity: 0.9;
  }
  .dialog-error{
    border: 1px solid #f56c6c;
    background: #FFFAEB;
    opacity: 0.9;
  }
  .dialog-info{
    border: 1px solid #909399;
    background: #EBF8F2;
    opacity: 0.9;
  }
  .dialog-leave-active{
    transition: all 1s;
  }
  .dialog-leave {
    opacity: .9;
  }
  .dialog-leave-to {
    opacity: 0;
  }
</style>
